<template>
  <div class="h5-layout">
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onBack"
    />
    <div class="content">
      <router-view></router-view>
    </div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const title = ref('H5端')
const active = ref(0)

const onBack = () => {
  router.back()
}

const onChange = (index: number) => {
  switch(index) {
    case 0:
      router.push('/')
      break
    case 1:
      router.push('/user')
      break
  }
}
</script>

<style lang="scss" scoped>
.h5-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style> 